<template>
  <el-dialog
    :visible.sync="dialog"
    :close-on-click-modal="true"
    append-to-body
    title="A状态校验信息"
    width="800px"
    top="15px"
    @close="doClose"
  >
    <div style="margin-bottom:20px;">
      线上条码：
      <span style="font-weight:bold;">{{ upcStoreInfo.upcNbr }}</span>
      <span style="padding-left: 10px;">
        线上商品名称：
        <el-tooltip class="item" effect="dark" placement="bottom">
          <div slot="content">{{ itemName }}</div>
          <span style="font-weight:bold;">{{ itemName | ellipsis }}</span>
        </el-tooltip>
      </span>
    </div>
    <div style="margin-bottom:20px;">
      <el-radio-group v-model="countType" size="mini" @change="countTypeChange">
        <el-radio :label="0">全部： {{ totalData.length }}</el-radio>
        <el-radio :label="1">A门店数： {{ upcStoreInfo.countAStatus }}</el-radio>
        <el-radio :label="2">被过滤门店数：{{ upcStoreInfo.countNonAStatus }}</el-radio>
        <el-radio :label="3">白名单门店数：{{ upcStoreInfo.countWhitelist }}</el-radio>
      </el-radio-group>
    </div>
    <div class="store-container">
      <el-table
        ref="storeListTable"
        :data="dataList"
        :row-class-name="tableRowClassName"
        size="small"
        border
        :header-cell-style="{ height: '0px', padding: '0px' }"
        :row-style="{height: '0px'}"
        :cell-style="{padding: '0px'}"
        :height="tableHeight"
        style="width: 100%;"
      >
        <el-table-column type="index" :index="tableIndex" label="序号" />
        <el-table-column :show-overflow-tooltip="true" sortable label="省份" prop="province" />
        <el-table-column :show-overflow-tooltip="true" sortable label="城市" prop="city" />
        <el-table-column :show-overflow-tooltip="true" sortable label="DM" prop="dm" />
        <el-table-column :show-overflow-tooltip="true" sortable label="门店号" prop="storeNbr" />
        <el-table-column :show-overflow-tooltip="true" sortable label="状态" prop="statusCode" />
      </el-table>
      <!--分页组件-->
      <!--<el-pagination
        :total="total"
        style="margin-top: 8px;"
        layout="total, prev, pager, next, sizes"
        :current-page="currentPage"
        :page-sizes="[50]"
        :page-size="pageSize"
        @size-change="sizeChange"
        @current-change="currentChange"
      />-->
    </div>
  </el-dialog>
</template>
<script>
import initTable from '@/utils/initTable'
import { findUpcStoreInfoByListInfoId } from '@/api/olm/item-list'

export default {
  filters: {
    ellipsis(value) {
      if (!value) return ''
      if (value.length > 35) {
        return value.slice(0, 35) + '...'
      }
      return value
    }
  },
  mixins: [initTable],
  props: {
    parent: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      loading: true,
      dialog: false,
      data: [],
      pageSize: 50,
      currentPage: 1,
      total: 0,
      url: '',
      params: {},
      query: {},
      time: 170,
      tableHeight: window.innerHeight * 0.55,
      upcStoreInfo: {},
      totalData: [],
      itemName: null,
      countType: 0
    }
  },
  computed: {
    dataList: function() {
      if (this.data && this.dialog) {
        // return this.data.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
        return this.data
      } else {
        return []
      }
    }
  },
  watch: {
    data: {
      handler(n, o) {
        this.$nextTick(() => {
          if (this.$refs.storeListTable) {
            this.$refs.storeListTable.doLayout()
          }
        })
      }
    }
  },
  created() {
    this.$nextTick(() => {
      // this.init()
    })
  },
  methods: {
    async init() {
      if (!await this.beforeInit()) {
        return
      }
    },
    beforeInit() {
      return true
    },
    tableIndex(index) {
      return (this.currentPage - 1) * this.pageSize + index + 1
    },
    currentChange(e) {
      this.currentPage = e
    },
    sizeChange(e) {
      this.pageSize = e
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 0) {
        return 'bg-row'
      }
      return ''
    },
    countTypeChange(val) {
      if (val === 0) { // 全部
        this.data = this.totalData
      } else if (val === 1) { // 未被过滤
        if (this.totalData) {
          this.data = []
          this.totalData.forEach(item => {
            if (!item.storeGroup && item.statusCode === 'A') { // 兼容以前的档期
              this.data.push(item)
            } else if (item.storeGroup === 1) {
              this.data.push(item)
            }
          })
        }
      } else if (val === 2) { // 被过滤门店数
        if (this.totalData) {
          this.data = []
          this.totalData.forEach(item => {
            if (!item.storeGroup && item.statusCode === 'D') { // 兼容以前的档期
              this.data.push(item)
            } else if (item.storeGroup === 2) {
              this.data.push(item)
            }
          })
        }
      } else if (val === 3) { // 白名单门店数
        if (this.totalData) {
          this.data = []
          this.totalData.forEach(item => {
            if (item.storeGroup === 3) {
              this.data.push(item)
            }
          })
        }
      } else {
        this.data = this.totalData
      }
      this.total = this.data.length
      this.currentPage = 1
    },
    findUpcStoreInfo(listInfoId) {
      if (!listInfoId) {
        return
      }
      var _this = this
      findUpcStoreInfoByListInfoId(listInfoId).then(res => {
        if (res) {
          _this.upcStoreInfo = res.result
          if (_this.upcStoreInfo) {
            _this.totalData = _this.upcStoreInfo.storeInfos
            _this.data = _this.totalData
            if (_this.totalData) {
              _this.total = _this.totalData.length
            } else {
              _this.data = []
              _this.totalData = []
            }
          } else {
            _this.upcStoreInfo = {}
          }
        }
      })
    },
    doClose() {
      this.dialog = false
      this.total = 0
      this.data = []
      this.totalData = []
      this.countType = 0
      this.upcStoreInfo = {}
      this.currentPage = 1
    }
  }
}
</script>
<style scoped>
.store-container >>> .el-table .bg-row {
  background: rgb(243, 252, 246);
}
</style>
